<html>
    <head>
        <!--通过scipt标签引入vue-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body >
        <!--这里的id，要和`new Vue({el})`匹配-->
        <!--表示这个标签里的内容，会被vue处理。-->
        <div id="vue">
            <input v-model="name" placeholder="姓名"/>
            <!--`{{ variable }}` 会把变量打印出来。-->
            <p>Hello {{ name }}!</p>
            <!--有时候，需要把变量值写入html属性，这时在属性前加`:`，让vue为这个属性进行值替换。-->
            <!--替换时，可以调用简单函数。如果使用字符串，用单引号。-->
            <input readonly="readonly" :placeholder="'Hello '+name+'!'"/>
            <hr />

            <input v-model="names" placeholder="逗号分隔的名字"/>
            <!--`v-for`是循环，使用`v-for='element in list'`语法， 重复生成这个标签。重复中，可以使用`element`。-->
            <div v-for="n in names.split(',')">
                Hello {{n}}!
            </div>
            <hr />

            <!--`v-on:`及其缩写`@`用来指定事件，`click`是一个常用事件。属性的内容是方法调用，如果没有参数，也可以只写方法名。-->
            <button v-on:click="add(1)">加一</button>
            <button v-on:click="add(-1)">减一</button>
            <button @click="reset">重置</button>
            <p>Count: {{count}}</p>
        </div>

        <script> 
            var vue = new Vue({
                el: '#vue', // html的某个标签的id，表示这个标签里的内容，会被vue处理。
                data: { // data申明数据
                    name: "World",
                    names: "Adam,Betty,Chistopher",
                    count: 0,
                },
                methods: {  // methods申明方法
                    add(num) {
                        // methods里需要显示使用`this`指针访问类属性。否则变量是局部变量，而不是类属性。
                        this.count += num
                    },
                    reset() {
                        this.count = 0
                    },
                }
            })
        </script>
    </body>
</html>